<!DOCTYPE html>
<html lang="en">

<head>
    <title>地图导航</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style rel="stylesheet" type="text/css">
        /*去除正文区域的内外间距：全屏*/
        body {
            margin: 0 auto;
            padding: 0;
        }

        /*地图加载容器的大小*/
        #container {
            width: 100%;
            height: 100vh;
        }

        /*自定义信息窗口样式*/
        .custom-info-window {
            padding: 10px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
        }

        .person-info {
            color: #0066cc;
        }

        .device-info {
            color: #ff6600;
        }

        .restricted-area {
            color: #cc0000;
        }
    </style>
</head>

<body>
    <!--
            这里的html是鸿蒙web组件嵌入使用的。
            web组件不是浏览器，不能完美支持js脚本的弹窗。
            需要弹窗，也要传递给鸿蒙来处理。
        -->

    <!--地图呈现容器-->
    <div id="container"></div>

    <!--设置全局变量-->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "ff325ae6ef0f6f15b093ca108dcd1f3b",
        };
    </script>

    <!--加载官方地图脚本：请附加申请的key-->
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=8b1820aca997afe7bb6353d08be8a023"></script>

    <!--加载地图UI组件库-->
    <script src="https://webapi.amap.com/ui/1.1/main.js"></script>

    <!--自己的脚本-->
    <script type="text/javascript">

        // 全局变量存储地图对象和标记点
        var map;
        var markers = [];
        var currentLocationMarker;
        var polylines = [];
        var restrictedAreas = [];

        // 测试数据
        var testData = {
            personnel: [
                { name: "张亚飞", position: [121.475, 31.238], role: "警员", phone: "13800138001" },
                { name: "李四", position: [121.476, 31.237], role: "勤务", phone: "13800138002" },
                { name: "王五", position: [121.474, 31.236], role: "警员", phone: "13800138003" }
            ],
            devices: [
                { name: "摄像头001", position: [121.4755, 31.2375], type: "监控", status: "正常" },
                { name: "传感器002", position: [121.4745, 31.237], type: "环境监测", status: "警告" },
                { name: "门禁003", position: [121.476, 31.2365], type: "出入口控制", status: "正常" }
            ],
            restrictedRoads: [
                { path: [[121.473, 31.238], [121.474, 31.2375], [121.475, 31.237]], reason: "道路施工", period: "2024-10-01至2024-12-31" },
                { path: [[121.476, 31.239], [121.477, 31.238]], reason: "缉查布控", period: "2024-11-15至2024-11-16" }
            ]
        };

        // 初始化地图
        function initMap() {
            map = new AMap.Map(
                "container",
                {
                    zoom: 18,
                    center: [121.474805, 31.237220],
                    viewMode: '3D' // 使用3D视图
                }
            );

            // 加载测试数据
            loadTestData();
        }


        function loadTestData() {
            // 添加人员标记
            testData.personnel.forEach((person, index) => {
                addPersonMarker(person.position, person.name,
                    `姓名: ${person.name}<br>职位: ${person.role}<br>电话: ${person.phone}`,
                    index);
            });

            // 添加设备标记
            testData.devices.forEach((device, index) => {
                addDeviceMarker(device.position, device.name,
                    `设备: ${device.name}<br>类型: ${device.type}<br>状态: ${device.status}`,
                    index);
            });

            // 添加禁行路段
            testData.restrictedRoads.forEach(road => {
                addRestrictedArea(road.path, road.reason, road.period);
            });
        }


        function addPersonMarker(position, title, content, index) {
            var marker = new AMap.Marker({
                map: map,
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', //
                position: position,
                title: title,
                extData: { type: 'person' }
            });

            marker.on('click', function () {
                new AMap.InfoWindow({
                    content: `<div class="custom-info-window person-info">${content}</div>`,
                    offset: new AMap.Pixel(0, -30)
                }).open(map, position);
            });

            markers.push(marker);
            return marker;
        }

        function addDeviceMarker(position, title, content, index) {
            var marker = new AMap.Marker({
                map: map,
                // icon: 'https://cdn8.axureshop.com/demo2025/2105401/images/%E5%9C%B0%E5%9B%BE/u2452.svg', 
                icon: new AMap.Icon({
                    image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', 
                    size: new AMap.Size(19, 31)
                }),
                position: position,
                title: title,
                extData: { type: 'device' }
            });

            marker.on('click', function () {
                new AMap.InfoWindow({
                    content: `<div class="custom-info-window device-info">${content}</div>`,
                    offset: new AMap.Pixel(0, -30)
                }).open(map, position);
            });

            markers.push(marker);
            return marker;
        }

        function addRestrictedArea(path, reason, period) {
            var polyline = new AMap.Polyline({
                map: map,
                path: path,
                strokeColor: "#cc0000", // 红色
                strokeWeight: 6,
                strokeStyle: "dashed", // 虚线
                strokeDasharray: [10, 5] // 虚线样式
            });

            // 添加禁行区域信息窗口
            var middlePoint = path[Math.floor(path.length / 2)];
            var marker = new AMap.Marker({
                position: middlePoint,
                map: map,
                 icon: new AMap.Icon({
                    image: 'https://cdn8.axureshop.com/demo2025/2105401/images/%E5%B7%A5%E4%BD%9C/u258.svg', // 测试用
                    size: new AMap.Size(19, 31)
                }),
                // icon: 'https://cdn8.axureshop.com/demo2025/2105401/images/%E5%B7%A5%E4%BD%9C/u258.svg', 
                content: '禁行区域',
                extData: { type: 'restricted' }
            });

            marker.on('click', function () {
                new AMap.InfoWindow({
                    content: `<div class="custom-info-window restricted-area">
                    <strong>禁行路段</strong><br>
                    原因: ${reason}<br>
                    时间: ${period}
                </div>`,
                    offset: new AMap.Pixel(0, -30)
                }).open(map, middlePoint);
            });

            restrictedAreas.push({ polyline: polyline, marker: marker });
        }

        //【方法】：设置定位
        function setLocation(lon, lat) {
            // 清除之前的当前位置标记
            if (currentLocationMarker) {
                map.remove(currentLocationMarker && currentLocationMarker.getExtData().type === 'current');
            }

            // 创建蓝色标记表示当前位置
            currentLocationMarker = new AMap.Marker({
                map: map,
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                position: [lon, lat],
                extData: { type: 'current' }, // 明确标记类型
                zIndex: 100
            });

            // 设置地图中心点
            map.setZoomAndCenter(20, [lon, lat]);

            // 添加当前位置的信息窗口
            var infoWindow = new AMap.InfoWindow({
                content: '<div class="custom-info-window">当前位置</div>',
                offset: new AMap.Pixel(0, -30)
            });
            infoWindow.open(map, currentLocationMarker.getPosition());
        }




        // 添加标记点
        function addMarker(position, title, index) {
            // 使用不同颜色标记不同位置
            var colors = ['red', 'green', 'blue', 'purple'];
            var color = colors[index % colors.length];

            var marker = new AMap.Marker({
                map: map,
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_' + color.charAt(0) + '.png',
                position: [position.lng, position.lat],
                title: title
            });

            // 添加点击事件
            marker.on('click', function () {
                var infoWindow = new AMap.InfoWindow({
                    content: '<div class="custom-info-window">' + title + '</div>',
                    offset: new AMap.Pixel(0, -30)
                });
                infoWindow.open(map, marker.getPosition());
            });

            markers.push(marker);

            return marker;
        }

        // 绘制路线
        function drawRoute(path) {
            // 清除之前的路线
            if (polyline) {
                map.remove(polyline);
            }

            // 创建新的路线
            polyline = new AMap.Polyline({
                map: map,
                path: path,
                strokeColor: "#3366FF",
                strokeWeight: 5,
                strokeStyle: "solid"
            });

            // 调整视野显示全部路线
            map.setFitView(polyline);
        }

        // 添加自定义位置
        function addCustomLocation(lon, lat, title) {
            var marker = addMarker({ lng: lon, lat: lat }, title, markers.length);
            return marker;
        }

        //当页面正式加载完毕
        window.onload = function () {
            initMap();
            //调用鸿蒙端，代理注册过来的函数
            window.traffic.setCurrentLocation()
        }


    </script>
</body>

</html>